
<template>
	<!-- 添加弹框 -->
	<el-dialog  title="标签添加" width="40%" :modal="false"  :visible.sync="dialogTableVisible" class="wrap" @close="cancel" >

		<i class="el-icon-close close" @click="cancel" style="color: white;z-index: 99;"></i>
	    <div class="bt">标签添加</div>
			<div class="quan">
				<div class="bqleft">
					<!-- <div class="tjlx" @click = "tianjia" v-if="tj">
						+点击添加类型
					</div>
					<div class="xglx" v-if= 'xiugai'>
						<el-input class="input" placeholder="" v-model="fz"  ></el-input>
						<el-button type="success" size="small" class="btn"   @click="ad1">保存</el-button>
					</div> -->
					<ul>
						<li   v-for = "v in dataList" :class="v.class" @click = "bqlist2(v.fzmc)" >
							{{v.fzmc}}
							<i class="el-icon-close del1" @click = "delbqfl(v.id)"></i>
						</li>
					</ul>
				</div>
				<div class="bqright">
					<!-- <div class="tjlx"  @click = "tianjia2" v-if="tj2">
						+点击添加类型
					</div>
					<div class="xglx" v-if= 'xiugai2'>
						<el-input class="input" placeholder="" v-model="bq"  ></el-input>
						<el-button type="success" size="small" class="btn"   @click="ad2">保存</el-button>
					</div> -->
					<div class="bqlist">
						  <!-- <el-tag type="success" class="list1" closable  @close = "delbq(v.id)" v-for="v in bqList">{{v.bqmc}}</el-tag> -->
              <el-checkbox-group v-model="checkList" >
                    <el-checkbox v-for="v in bqList" :label="v.bqmc">{{v.bqmc}}</el-checkbox>
              </el-checkbox-group>
					</div>

				</div>

			</div>

		<el-button type="info" class="submit" @click="submit(checkList)">添加</el-button>
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	export default {
		data() {
			return {
				bq:'',
				fz:'',
				vjsmc: '',
				vnote: '',
				tj:true,
				xiugai:false,
        checkList:[],
				dataList:[],
				bqList:[],
				tj2:true,
				xiugai2:false,
				visenable: '',
				dialogTableVisible: true,

					sx: 'Y',

			}
		},
		created () {
			 // this.vjsid =this.params.row.id;
//				this.$store.dispatch('changeTitle','标签页');//修改title
//				this.$store.dispatch('changeRouterIndex','/admin/xxjbsz');//修改路由
				this.bqlist()
		},
		methods: {
      submit(data){
        // alert(data)
        this.cancel(data)
      },
			tianjia(){
				this.tj = false;
				this.xiugai = true;
			},
			tianjia2(){
				this.tj2 = false;
				this.xiugai2 = true;
			},
			delbqfl(id){
				// alert(id)
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
								ids:id+'',
								xxid:logininfo.xxid+'',
						});

					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bqfl/deletepl',params3)
					.then( res => {
							this.bqlist()
							this.bqlist2(this.fzmc1)
					}).catch( res => {

					})
			},
			bqlist2(fzmc){
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
							fzmc:fzmc,
							xxid:logininfo.xxid,
						});

					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bq/list2',params3)
					.then( res => {
							this.fzmc1 = fzmc
							// alert(this.fzmc1)
							console.log(res)
							console.log(111)
							let data = res.data.data;
							let list = data.list;
							this.bqList = list;
							this.searchLoading = false;
							for(var i=0;i<=this.dataList.length; i++){
								if(fzmc==this.dataList[i].fzmc){
									this.dataList[i].class = "back"
								}else{
									this.dataList[i].class = "red"
								}
							}
					}).catch( res => {
							console.log(res)
							this.searchLoading = false;
					})

			},
			bqlist(){
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
						xxid:logininfo.xxid,
				});

					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bqfl/list2',params3)
					.then( res => {
							console.log(res)
							console.log(111)
							let data = res.data.data;
							let list = data.list;
							this.dataList = list;
							this.searchLoading = false;
					}).catch( res => {
							console.log(res)
							this.searchLoading = false;
					})
			},
			delbq(id){
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
							ids:id+'',
							xxid:logininfo.xxid+'',
						});

					this.searchLoading = true;

					this.axios.post(this.$store.state.api + 'bq/deletepl',params3)
					.then( res => {
							this.bqlist()
							this.bqlist2(this.fzmc1)
					}).catch( res => {

					})
			},
			ad1(){
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
							fzmc:this.fz,
							xxid:logininfo.xxid,
						});

					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bqfl/insert',params3)
					.then( res => {
						this.tj = true;
						this.xiugai = false;
						this.bqlist()
						this.fz = ""
					}).catch( res => {
							console.log(res)
							this.searchLoading = false;
					})
			},
			ad2(){
				// alert(this.fzmc1)
				var logininfo = JSON.parse(localStorage.logininfo) ;

				var params3 = qs.stringify({
								fzmc:this.fzmc1,
								bqmc:this.bq,
								xxid:logininfo.xxid,
						});

					this.searchLoading = true;
					this.axios.post(this.$store.state.api + 'bq/insert',params3)
					.then( res => {
							console.log(res)
							this.tj2 = true;
							this.xiugai2 = false;
							this.bqlist2(this.fzmc1)
							this.bq =""
					}).catch( res => {
							console.log(res)
							this.searchLoading = false;
					})
			},

			cancel(list) {
				this.$emit('close', { type: 'bq', cancel: true,data:list})
			}
		}
	}
</script>
<style lang="less" scoped>
.red{
  background: #fff;

}
.back{
  color: #fff;
  background: red;
}
	.wrap {
		// width: 100%;
		// height: 100%;
		// float: left;
		// position: relative;
		.quan{
      // width: 500px;
      height: 500px;
			// position: relative;
			// height: 450px;
			.bqleft{
				padding-bottom: 50PX;
				text-align: center;
				width: 30%;
				float: left;
				// border: 3px solid #787878;
				.tjlx{
					width: 150px;
					border: 3px solid #ccc;
					height: 40px;
					line-height: 35px;
					font-weight: 700;
					// border-radius: 5px;
					color: #ccc;
					font-size: 15px;
					text-align: center;
					margin: 10px auto;
				}
				.xglx{
					margin: 10px auto;
					height: 40px;
					line-height: 40px;
				}
				.input{
					width: 100px;
				}
				ul{
					width: 100%;
					// border-radius: 15px;
					// margin-top: 20px;
					border: 3px solid #ccc;
					padding-top: 10px;
					padding-bottom:  10px;
					li{
						width: 80%;
						height: 50px;
						// border-radius: 5px;
						margin: 0 auto;
						line-height: 50px;
						border: 1px solid #454545;
						position: relative;
						// background: #ccc;
						.del1{
              font-size: 20px;
              position: absolute;
              top: 5px;
              right: 5px;
            }
					}
					li:hover{
						background-color: red;
						color: #fff;
					}
				}

			}
			.bqright{
				width: 60%;
				float: right;
				top:0;
				text-align: center;
				// margin-left: 30%;
				// border: 1px solid red;
				padding-bottom: 50PX;
				.tjlx{
					width: 150px;
					border: 3px solid #ccc;
					height: 40px;
					line-height: 35px;
					font-weight: 700;
					// border-radius: 5px;
					color: #ccc;
					// font-size: 15px;
					text-align: center;
					margin: 10px auto;
				}
				.input{
					width: 100px;
				}
				.bqlist{
					width: 100%;
					// border-radius: 15px;
					// margin-top: 20px;
					border: 3px solid #ccc;
					padding-top: 10px;
					padding-bottom:  10px;
					margin-top: 20px;
					.list1{
						width: 20%;
						height: 30px;
						line-height: 30px;
						margin-left: 5%;
						margin-top: 20px;
						margin-bottom: 20px;
					}
				}
			}
		}



		.input-block {
			margin-bottom: 20px;
			text-align: center;
		}
		.bt{
		position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top:0;
			left:0;
			background: #50BFFF;
			margin-bottom: 20px;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.sx{
				width: 300px;
				display: inline-block;
				text-align: left;
		}
		.select-block {
	 		display: block;
	 		width: 85%;
 	    }
 	    .form {
		text-align: center;
	}
		.input {
			display: inline-block;
			vertical-align: middle;
		}
		.submit {
			width: 120px;
			display: block;
			margin: 0 auto;
			margin-top: 20px;
		}
	}
	.wrap:after{
		content:'';
    display:block;
    clear:both;
	}
</style>
